<script setup lang="ts">
import useForm from "@/hooks/useForm";
import { ProForm } from "@/modules/package/form";
import { ElInput, ElMessage } from "element-plus";

const { isFetching, model, refForm, submit, reset, onFetchResponse } =
  useForm("");

onFetchResponse(() => {
  ElMessage.success("操作成功");
});

// @ts-expect-error
const validator = (rule, value, callback) => {
  // @ts-expect-error
  if (value !== model.value.p2) {
    callback(new Error("两次密码不一致"));
  } else {
    callback();
  }
};

const formItems = [
  {
    label: "旧密码",
    itemProps: {
      rules: { required: true, message: "请输入旧密码" },
    },

    children: {
      field: "p1",
      type: ElInput,
      props: {
        placeholder: "请输入旧密码",
        showPassword: true,
        type: "password",
      },
    },
  },
  {
    label: "新密码",
    itemProps: {
      rules: { required: true, message: "请输入新密码" },
    },
    children: {
      field: "p2",
      type: ElInput,
      props: {
        placeholder: "请输入新密码",
        showPassword: true,
        type: "password",
      },
    },
  },
  {
    label: "确认密码",
    itemProps: {
      rules: [{ required: true, message: "请再次输入新密码" }, { validator }],
    },
    children: {
      field: "p3",
      type: ElInput,
      props: {
        placeholder: "请再次输入新密码",
        showPassword: true,
        type: "password",
      },
    },
  },
];
</script>

<template>
  <ProForm
    ref="refForm"
    :col="24"
    :model="model"
    :form-items="formItems"
    :loading="isFetching"
    label-width="6em"
    label-position="left"
    @submit="submit"
    @reset="reset"
  />
</template>
